<template>
    <div style="padding: 15px;color: #fff; ">
            <div class="task" @click="taskClick(item)" v-for="(item, index) in data" :key="index">
                <div>
                    <img :src="item.logUrl" style="width: 35px;height: 35px;border-radius: 50%;" />
                </div>
                <div style="width: 72%;text-align: left;">
                    <div>{{ item.describe }}</div>
                    <div style="display: flex;align-items: center; font-size: 10px;margin-top: 6px;">
                        <img style="width: 18px;height: 18px;" src="../static/img/bi.png">
                        <label>{{ addCommas(item.points) }}</label>
                    </div>
                </div>
                <div>
                    <!-- <img style="width: 20px;height: 20px;" src="../static/img/chevron-right.png" /> -->
                    <el-icon color="#fff"><Select /></el-icon>
                </div>
            </div>
        <div style="margin-bottom: 80px;"></div>

    </div>
</template>

<script>
import Api from '../api/api'
export default {
    props: {
        list: {
            type: Array,
            defalut: () => []
        }
    },
    data() {
        return {
            data:[]
        }
    },
    mounted() {
        Api.get('/taskinfo/completedPage').then(res => {
            console.log('dada', res)
            if (res.code == 200) {
                this.data = res.data.records

            }
        })
    },
    methods: {
        addCommas(number) {
            return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        },
    }
}
</script>


<style lang="scss" scoped>

.task {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background:#546C7F33;
    border-radius: 4px;
    margin-bottom: 10px;
    padding: 10px;

    img {
        margin-right: 6px;
    }
}
</style>